<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <div class="main" id="outside">
        <div style="margin-left: 30px;font-size: 20px;">Demo</div>
        <div class="content" >
          <text class="text" id="J_openMagicMirror">打开魔镜</text>
        </div>
        <div class="content" id="J_makeUp">
          <text class="text" id="J_makeUp">试装</text>
        </div>
        <div class="content" id="J_takePhoto">
          <text class="text" id="J_takePhoto">拍照</text>
        </div>
        <div class="image_content" id="J_image"></div>
        <img id="J_scan" style="position: fixed;bottom: 30px;right: 30px;font-size: 20" src="//gw.alicdn.com/mt/TB1uCZ4QpXXXXcLaXXXXXXXXXXX-64-64.png"></img>
      </div>
      <script type="text/javascript" src="https://g.alicdn.com/mtb/weex-vue-h5-render/0.2.2/index.js"></script>
      <script type="text/javascript" src="https://g.alicdn.com/mtb/mapp-lib/0.2.0/app.web.js"></script>
      <script type="text/javascript">
        var MAPP = window.plugin.default;
        var imageNode = document.getElementById("J_image");
        var openMMNode = document.getElementById("J_openMagicMirror");
        var makeUpNode = document.getElementById("J_makeUp");
        var takePhotoNode = document.getElementById("J_takePhoto");
        var goScanNode = document.getElementById("J_scan");

        function openMagicMirror() {
          if (openMMNode.firstChild.nodeValue == "打开魔镜") {
            openMMNode.firstChild.nodeValue = "关闭魔镜";
            MAPP.business.magicMirrorOpen(function(e) {
                alert('success' + JSON.stringify(e));
            }, function(e) {
                alert('failure' + JSON.stringify(e));
            });
          } else {
            openMMNode.firstChild.nodeValue = "打开魔镜";
            MAPP.business.magicMirrorClose(function(e) {
                alert('success' + JSON.stringify(e));
            }, function(e) {
                alert('failure' + JSON.stringify(e));
            });
          }
        }

        function makeUp() {
          var params = {
            makeUpList: [
              {
                cspuid: 1,
                weight: 0.5,
                attrs:{
                  color: '#000000'
                }
              },
              {
                cspuid: 14,
                weight: 0.5
              },
              {
                cspuid: 18,
                weight: 0.5
              }
            ]
          };
          MAPP.business.magicMirrorMakeUp(params, function(e) {
                alert('success' + JSON.stringify(e));
            }, function(e) {
                alert('failure' + JSON.stringify(e));
            });
        }

        function takePhoto(){
          MAPP.business.magicMirrorTakePhoto(function(e) {
            imageNode.innerHTML='<img class="image" src="data:image/jpg;base64,'+e.src+'"></img>'
          }, function(e) {
            alert('failure' + '拍照失败');
          });
        }

        function goScan(){
          window.WindVane.call('magicMirror', 'goScan', '', function(e) {
                alert('success' + JSON.stringify(e));
            }, function(e) {
                alert('failure' + JSON.stringify(e));
            });
        }

        openMMNode.addEventListener("click", openMagicMirror, false);
        makeUpNode.addEventListener("click", makeUp, false);
        takePhotoNode.addEventListener("click", takePhoto, false);
        goScanNode.addEventListener("click", goScan, false);
      </script>
      <style>
      .image {
        width: 200px;
        background-color: #eeeeee;
        border-width: 2px;
        border-color: #000000;
      }
      .text {
        font-size: 20px;
      }
      .main{
        margin-top: 50px;
      }
      .image_content{
        margin-top: 20px;
        margin-left: 30px;
        margin-right: 30px;
        text-align: center;
      }
      .content{
        margin-top: 15px;
        margin-left: 30px;
        margin-right: 30px;
        border-style: solid;
        border-color: #eeeeee;
        border-width: 2px;
        border-radius: 5px;
        text-align: center;
        background-color: #ffffff;
        padding: 10px;
      }
      </style>
    </body>
</html>